<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/base.css" />
	</head>
	<body>
		<div class="goBack">返回首页</div>
		
		
		
		
		<script src="js/three.js" ></script>
		<script src="js/mmd/ammo.js"></script>
		<script src="js/mmd/mmdparser.min.js"></script>
		<script src="js/animation/CCDIKSolver.js"></script>
		<script src="js/animation/MMDAnimationHelper.js"></script>
		<script src="js/animation/MMDPhysics.js"></script>
		<script src="js/OutlineEffect.js" ></script>
		<script src="js/MMDLoader.js"></script>
		<script src="js/TGALoader.js"></script>
		<script src="js/OrbitControls.js"></script>
		<script>
			var container;

			var mesh, camera, scene, renderer, effect;
			var helper, ikHelper, physicsHelper;
	
			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;

			var clock = new THREE.Clock();
			 
			init();
			animate();
			function init(){
				container = document.createElement( 'div' );
				document.body.appendChild( container );
				//创建场景
				scene=new THREE.Scene();
				scene.background=new THREE.Color( 0x66ccff );
				//创建相机
				camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,2000);
				camera.position.z=50;
				
				//定义极坐标网格的对象
//				var gridHelper = new THREE.PolarGridHelper( 30, 10 );
//				gridHelper.position.y = - 10;
//				scene.add( gridHelper );
				
				//环境光
				var ambient = new THREE.AmbientLight( 0x666666 );
				scene.add( ambient );
				
				//
				var directionalLight = new THREE.DirectionalLight( 0x887766 );
				directionalLight.position.set( - 1, 1, 1 ).normalize();
				scene.add( directionalLight );
				
				
				//渲染器
				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				container.appendChild( renderer.domElement );

				effect = new THREE.OutlineEffect( renderer );
				
				function onProgress( xhr ) {

					if ( xhr.lengthComputable ) {

						var percentComplete = xhr.loaded / xhr.total * 100;
						console.log( Math.round( percentComplete, 2 ) + '% downloaded' );

					}

				};

				function onError( xhr ) {
				};
				
				var modelFile = 'mmd/Sakura Miku.pmd';
				var vmdFiles = [ 'mmd/vmds/wavefile_v2.vmd' ];

				helper = new THREE.MMDAnimationHelper( {
					afterglow: 2.0
				} );

				var loader = new THREE.MMDLoader();

				loader.loadWithAnimation( modelFile, vmdFiles, function ( mmd ) {

					mesh = mmd.mesh;
					mesh.position.y = - 10;
					scene.add( mesh );

					helper.add( mesh, {
						animation: mmd.animation,
						physics: true
					} );

					ikHelper = helper.objects.get( mesh ).ikSolver.createHelper();
					ikHelper.visible = false;
					scene.add( ikHelper );

					physicsHelper = helper.objects.get( mesh ).physics.createHelper();
					physicsHelper.visible = false;
					scene.add( physicsHelper );

					

				}, onProgress, onError );
				
				
				var controls = new THREE.OrbitControls( camera, renderer.domElement );

				window.addEventListener( 'resize', onWindowResize, false );

				var phongMaterials;
				var originalMaterials;

				function makePhongMaterials( materials ) {

					var array = [];

					for ( var i = 0, il = materials.length; i < il; i ++ ) {

						var m = new THREE.MeshPhongMaterial();
						m.copy( materials[ i ] );
						m.needsUpdate = true;

						array.push( m );

					}

					phongMaterials = array;

				}
			}
			function onWindowResize() {

				windowHalfX = window.innerWidth / 2;
				windowHalfY = window.innerHeight / 2;

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				effect.setSize( window.innerWidth, window.innerHeight );

			}

			//

			function animate() {

				requestAnimationFrame( animate );

				
				render();
				

			}

			function render() {

				helper.update( clock.getDelta() );
				effect.render( scene, camera );

			}
		</script>
	</body>
</html>
